﻿@{
    Layout = null;
    var batchId = ViewBag.batchId;


   var Wl_Code=  ViewBag.Wl_Code ;
   var productModel = ViewBag.productModel as NB.MGJ.Model.Product_Product;
   var productBatchModel =ViewBag.productBatchModel as NB.MGJ.Model.Product_Batch;


}
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>流程</title>
<style>
    .FlowNodeUlLi {
        padding-left: 10px;
    }

        .FlowNodeUlLi li {
            list-style: none;
            font-size: 12px;
            margin: 5px;
        }

            .FlowNodeUlLi li span {
                color: #666;
            }

    #head {
        width: 100%;
        height: 20%;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        #head > img {
            width: 20%;
            height: 60%;
            background-color: red;
            margin-right: 5%;
            border-radius: 4px;
        }

        #head > div p {
            margin: 3% 0;
        }

            #head > div p > span:nth-child(1) {
                font-weight: 700;
            }

    #title img {
        width: 100%;
    }

    .Node_Title {
        display: flex;
        align-items: center;
        padding: 10px 5px;
        margin-bottom: 10px;
        border-bottom: 1px solid #e5e5e5;
    }

        .Node_Title > span:nth-child(1) {
            width: 18%;
            text-align: center;
            border-right: 1px solid #e5e5e5;
        }

        .Node_Title > span:nth-child(2) {
           flex:1;
            text-align: center;
        }

        .Node_Title > img:nth-child(3) {
            width: 16px;
        }

    .rotate {
        transform: rotate(180deg);
    }
</style>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />
<input id="batchId" value="@batchId" type="hidden" />

<div id="head">
    <img src="@productModel.ImageUrl1" alt="" />
    <div>
        <p>
            <span>品名：</span>
            <span>@productModel.ProductName</span>
        </p>
        <p>
            <span>批次：</span>
            <span>@productBatchModel.BatchName</span>
        </p>
        @*<p>
            <span>产品溯源码：</span>
            <span>@Wl_Code</span>
        </p>*@
    </div>
</div>
<div id="title">
    <img src="http://shnbbucket.oss-cn-beijing.aliyuncs.com/20180119165547.png" alt="Alternate Text" />

</div>
<div id="list">
    <div style="margin: 10px; border: 1px solid #e5e5e5;border-radius:4px ">
        <div class="Node_Title" onclick="isShow(this)">
            <span class="FixedLength" binding="{'text':'NodeName'}"></span>
            <span class="FixedLength" binding="{'text':'ChangeDate','textHandle':'datetime'}"></span>
            <img src="~/Content/webImgs/TraceSource/TraceSourceEdit/xiangxia.png" />
        </div>
        <ul class="FlowNodeUlLi">
            @*<li>
                操作：<span binding="{'text':'NodeName'}"></span>
            </li>*@
            <li class="m-nodecontent">
                内容：<span binding="{'text':'NodeContent'}"></span>
            </li>
            <li>
                操作人：<span binding="{'text':'ChangeLoginName'}"></span>
            </li>
            @*<li>
                    操作时间：<span binding="{'text':'ChangeDate','textHandle':'datetime'}"></span>
                </li>*@
        </ul>
        <div class="thumbnail" style="text-decoration: none;border:0">
            <img binding="{'src':'ImgUrl','srcHandle':$.MGJ.FlowNodeList.SrcNull}" onerror="this.src = '/Content/userImgs/Product/ProductNullImg.png'" style="width:100%;border-radius:4px;">
            @*<img src="~/Content/userImgs/Product/ProductNullImg.png" style="width:100%" />*@
        </div>


    </div>

</div>



<link href="~/Scripts/jQueryCF/jquery.cf.css" rel="stylesheet" />
<link href="~/Content/CommonCss/BootStrap/bootstrap.css" rel="stylesheet" />

@*<script src="~/Scripts/jquery.js"></script>*@
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/Scripts/MGJJS/mgjglobal.js"></script>
<script src="~/Scripts/jQueryCF/jquery.cf.js"></script>
<script src="~/Scripts/MGJJS/Common.js"></script>


<script type="text/javascript">
    function CONTENT_URL(_name) {
        return '/' + _name;
    }

    function SCRIPT_URL(_name) {
        return '/Scripts/' + _name + "?_=" + (Math.random() * 10000);
    }
    //跳转页面
    function ACTION_URL(actionName, controllerName) {
        var _actionUrl = '/ControllerName/ActionName';
        return _actionUrl.replace("ActionName", actionName).replace("ControllerName", controllerName);
    }
</script>

<script>
    function isShow(ele) {
        $(ele).find('img').toggleClass('rotate').parent().nextAll().toggle();
    }
    $(function () {
        $.MGJ.Common.Init();
    });
</script>

<script type="text/javascript">

    $.MGJ.FlowNodeList = [];

    (function () {
        var _this = $.MGJ.FlowNodeList;
        $.extend($.MGJ.FlowNodeList, {

            Ajax_GetFlowNodeList: function (batchId) {

                $.L.ajaxHandle({
                    url: ACTION_URL("GetNodeListByBatchId", "MaterialPreview"),
                    data: {
                        batchId: batchId
                    },
                    success: function (response) {
                        //console.log(response);
                        $("#list").L_bindingDataList(response);
                    }
                });

            },

            SrcNull: function (val) {
                if (val == "" || val == null) {
                    return "/Content/userImgs/Product/ProductNullImg.png";
                } else {
                    return val;
                }
            },

            AddNode: function () {
                window.location = "/Mobile/TempletNodelist?batchId=" + $("#batchId").val();
            }


        })
    })(jQuery);

    $(document).ready(function () {

        $.MGJ.FlowNodeList.Ajax_GetFlowNodeList($("#batchId").val());

    });
</script>